<template>
 <div>
     <div class="d-lg-flex  justify-content-center mt-3"  >

         <div class="left col-lg-7 col-12 p-0" >
             <!-- //左边显示 -->

             <!-- //分类显示 心情随笔-->
              <div class="card w-100  mt-2" >
                 <div class="card-header " style="background:white;">
                     <span class="font-weight-bold">生活杂谈 </span>

                 </div>
                 <div class="card-body d-flex flex-wrap border-0  ">
                      <div class="card col-12 col-lg-4 live-card pt-2"  v-for="(item) in tecBlog" :key="item.articleId" @click="toDetail(item)">
                                 <img class="card-img-top h-50" :src="item.img||'http://www.xcbl.cn/d/file/p/2019/10-27/d4e3cbb93a2c1a6839bec1ef31e11913.jpg'" alt="Card image cap">
                                 <div class="card-body d-flex flex-column justify-content-between pb-1">
                                     <div class="live-title font-weight-bold ">{{item.atitle}}</div>
                                     <p class="card-text tec-text  text-muted">{{item.acontent}}</p>
                                     <p><span class="text-black-50 mr-1"><i class="iconfont icon-yonghu "></i>{{item.auid}}</span>
                                     <span class="text-black-50">{{item.atime}}</span></p>
                                 </div>

                     </div>
                 </div>

             </div>
            <page @getNewData='getTecBlogs' :pageCount='pageShow' :articleNum='num'></page>

            <!-- //左边闭合标签 -->
         </div>
         <ads></ads>

     </div>
   <!-- <foot></foot> -->
 </div>
</template>

<script>
import foot from '@/components/util/footer.vue'
import page from '@/components/util/turnPage.vue'
import ads from '@/components/util/ad.vue'
 export default {
   data () {
     return {
       //运营数据
       operationalData:[
         {name:'liulan',title:'今日浏览量',num:233244,time:'2019-09-08'},
         {name:'dianzan',title:'点赞数',num:234234,time:'2019-09-08'},
         {name:'lanmu',title:'栏目数',num:2342355,time:'2019-09-08'},
         {name:'pinglun',title:'今日评论数',num:555,time:'2019-09-08'},
         {name:'see',title:'总浏览量',num:93349445,time:'2019-09-08'},
         ],
       //友情链接
       linkArr:[
         {title:'xx1299',src:'http://www.xx1299.cn'},
         {title:'杨青青博客',src:'https://www.yangqq.com/'},
         {title:'多股🐟',src:'http://www.duoguyu.com/'},
         {title:'Jensonhui‘s blog',src:'https://www.jensonhui.top/'},
         {title:'90后程序员夜月归途',src:'http://www.guitu18.com/'},
         {title:'小丑伯乐的个人博客',src:'http://www.xcbl.cn/'},
       ],
       //热门标签
       babelArr:['java','node','express','koa','koa2','myeclipse','git','linux','web','python'],
       personIndex:1,//个人信息显示下表
      list:[
               {img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2247854808,3186698491&fm=26&gp=0.jpg",text:"使用Element实现轮播图组件(el-carousel)的点击事件,切..._CSDN博客"},
                {img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568728433755&di=79697994efe2424ecf242e4e765ac515&imgtype=0&src=http%3A%2F%2Ficrvb3jy.xinmedia.com%2Fsolomo%2Farticle%2F4355%2FCDCFFCE4-6E0A-424F-A509-93E9563F3468.jpg",text:"hhh"}

              ],
     imgs:["https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2176335222,2367097283&fm=26&gp=0.jpg",
              "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1827292225,3445144251&fm=26&gp=0.jpg"
          ],

        // 技术分享
         tecBlog:[],
        pageShow:1,
          users:[],
          num:22,
        }
      },
   components: {
      foot,page,ads
   },
   methods:{
      //获取数量
      getPageNo(){
        this.$axios.get(this.$url+"getPageById?type=tec").then(res=>{
            let tmp = res.data.data[0]['count(articleId)'];

             this.pageShow = Math.ceil(tmp/10);
              this.num = tmp;

        })
      },

      //获取图标
      getIcon(icon){
        return "icon-"+icon;
      },
      colorRandom(){//十六进制颜色随机
      			var r = Math.floor(Math.random()*256);
      			var g = Math.floor(Math.random()*256);
      			var b = Math.floor(Math.random()*256);
      			var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
      			return `background:${color}`;
      },
       //到具体内容
       toDetail(item){
            this.$router.push('/homePage/readArticle?id='+item.articleId);
            localStorage.setItem("tecArticle",JSON.stringify(item));
        },
       getTecBlogs(page){
          this.page = page||1;
          console.log('page'+page)
           this.$axios.get(this.$url+"getDynamicById?belong=tec&pageNo="+page||1).then(res=>{

                let tmp = res.data.data;
                tmp.forEach(element => {
                    element.atime = this.$moment(element.atime).format(('YYYY-MM-DD hh:mm:ss'));
                });


                this.tecBlog = tmp;

          })
       }
   },
   created(){
       console.log(this.key)
       let belong = this.$route.query.id;
       if(!belong){
           belong = "all";
       }
       localStorage.setItem("pageNo",1);
        this.getTecBlogs(1);
         this.getPageNo();
   },
   computed:{
       newList(){
           return this.$store.getters.getList;
       }
   },

    watch:{
       '$route.query'(newid,oldid){
        this.users =[];
          localStorage.setItem("id",newid.id);
          localStorage.setItem("canLoad",true);
          localStorage.setItem("pageNo",1);

        // this.axios({
        //     url:this.$url+"getDynamicById",
        //     params:{belong:newid.id}
        // }).then(data=>{
        //     console.log("路由变了")
        //     this.users = data.data.data;
        // })
        },
        newList(newList,oldList){
            console.log(newList);
            if(!newList){
                console.log("no more");
                localStorage.setItem("canLoad",false);

            }
            this.users = this.users.concat(newList)
            // newList.forEach(element => {
            //   this.users.push(element);
            // });
        }
   },
 }
</script>



<style  lang='less' scoped>
    .left{
        .file-card{
            cursor: pointer;
            .file-title{
                     overflow: hidden;  //超出隐藏
                text-overflow: ellipsis;//省略号
                white-space: nowrap;//不换行
                }
            .file-Type{
                font-size: 14px;
                color:white;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

            }
            .buy{
                .money{
                    color:#ff9358;
                    font-size: 32px;
                }
            }
        }
        //生活杂谈
        .live-card{
            border-left: #eee 1px solid !important;
            border-bottom: #eee 1px solid !important;
            border: 0 ;
           cursor: pointer;
           .live-title{
                overflow: hidden;  //超出隐藏
                text-overflow: ellipsis;//省略号
                white-space: nowrap;//不换行


           }
        }
        .live-card:hover{
            background: #fff; box-shadow: #ccc 1px 1px 8px;
        }
        .live-card:hover img{
            transform: scale(1.05);
            transition:all .5s ease;
        }
        .tec-text{
            max-height:100px;       /*首先设置div高度*/
            margin: 0;
            overflow:hidden;           /*设置超出部分隐藏*/

            text-overflow:ellipsis;    /*然后设置文本隐藏方式*/

            /*为了实现多行文本也有效果要设置如下3个属性，具体属性的含义我还不是很清楚：*/

            display:-webkit-box;

            -webkit-line-clamp:3;    /*只显示3行，如果不设置这个属性，会出现文本被拦腰截断的现象*/

            -webkit-box-orient: vertical;
        }
       .swiper-img{
            cursor: pointer;
            padding: 0;
        }
        .banner2{
            overflow: hidden;
             cursor: pointer;
            li{
                position: relative;
                list-style: none;
                height: 49%;
                 cursor: pointer;
                img{
                    height: 100%;

                }
                div{
                        z-index: 10;
                        bottom: 0;
                        position: absolute;
                        top: 30%;
                        left: 0;
                        right: 0;
                        color: #FFF;
                        text-align: center;
                        font-size: 15px;
                        margin-top: 5px;
                        padding: 0 40px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-height: 24px;

                        white-space: nowrap;
                        height: 48px;
                }
            }

        }
    }
    .right{
      /* 标签 */
      .label-btn{
        color: white;
       }
       .label-btn:hover{
          background: #fff; box-shadow: #ccc 1px 1px 8px;
         transform: scale(1.05);
          transition:all .5s ease;
       }
      .recommend-li{
        cursor: pointer;
      }
      .recommend-li:hover{
            background: #fff; box-shadow: #ccc 1px 1px 8px;

      }
      .recommend-li:hover img{
            background: #fff; box-shadow: #ccc 1px 1px 8px;
            transform: scale(1.05);
            transition:all .5s ease;
      }
      /* //推荐阅读 */
      .recommend-content{
        max-height:100px;       /*首先设置div高度*/

        overflow:hidden;           /*设置超出部分隐藏*/

        text-overflow:ellipsis;    /*然后设置文本隐藏方式*/

        /*为了实现多行文本也有效果要设置如下3个属性，具体属性的含义我还不是很清楚：*/

        display:-webkit-box;

        -webkit-line-clamp:2;    /*只显示3行，如果不设置这个属性，会出现文本被拦腰截断的现象*/

        -webkit-box-orient: vertical;
      }

        .person{

            height: 300px;
        }

    }

    .user-icon{
            width: 24px;
            height: 24px;
            border-radius: 50%;
    }
    .big {
        margin: 0;
        padding: 0;
        .row{
            margin: 0;
            padding: 0;
        }
    }
     .all-title{
        border-bottom:none;
        color:#fff;
        background: #3da69c;
        text-align: center;
        box-sizing:border-box;
    }







    </style>
